<!-- 发布家教页面 -->
<template>
    <div class="tutoring-publish">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>发布家教信息</span>
                </div>
            </template>

            <el-form :model="formData" :rules="rules" ref="formRef" label-width="120px">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="formData.title" placeholder="请输入标题"></el-input>
                </el-form-item>

                <el-form-item label="描述" prop="description">
                    <el-input
                        v-model="formData.description"
                        type="textarea"
                        :rows="4"
                        placeholder="请输入详细描述"
                    ></el-input>
                </el-form-item>

                <el-form-item label="可授科目" prop="subjects">
                    <el-select v-model="formData.subjects" multiple placeholder="请选择可授科目">
                        <el-option
                            v-for="subject in subjects"
                            :key="subject"
                            :label="subject"
                            :value="subject"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="适合层次" prop="targetLevel">
                    <el-select v-model="formData.targetLevel" placeholder="请选择适合层次">
                        <el-option
                            v-for="level in targetLevels"
                            :key="level"
                            :label="level"
                            :value="level"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="课时费" prop="hourlyRate">
                    <el-input-number
                        v-model="formData.hourlyRate"
                        :min="0"
                        :precision="2"
                        :step="10"
                    ></el-input-number>
                    <span class="unit">元/小时</span>
                </el-form-item>

                <el-form-item label="授课方式" prop="teachingMethod">
                    <el-radio-group v-model="formData.teachingMethod">
                        <el-radio label="线下">线下</el-radio>
                        <el-radio label="线上">线上</el-radio>
                        <el-radio label="均可">均可</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="授课地点" prop="location">
                    <el-input v-model="formData.location" placeholder="请输入授课地点"></el-input>
                </el-form-item>

                <el-form-item label="可用时间" prop="availableTime">
                    <el-input
                        v-model="formData.availableTime"
                        type="textarea"
                        placeholder="请输入可用时间，如：周一至周五晚上7点后，周末全天"
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm">发布</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { tutoringService } from '@/api/tutoring'

const formRef = ref(null)
const formData = ref({
    title: '',
    description: '',
    subjects: [],
    targetLevel: '',
    hourlyRate: 100,
    teachingMethod: '线下',
    location: '',
    availableTime: ''
})

// 科目列表
const subjects = [
    '语文', '数学', '英语', '物理', '化学', '生物',
    '政治', '历史', '地理', '音乐', '美术', '体育'
]

// 适合层次
const targetLevels = [
    '小学', '初中', '高中', '大学', '考研', '出国'
]

// 表单验证规则
const rules = {
    title: [
        { required: true, message: '请输入标题', trigger: 'blur' },
        { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
    ],
    description: [
        { required: true, message: '请输入描述', trigger: 'blur' }
    ],
    subjects: [
        { required: true, message: '请选择可授科目', trigger: 'change' }
    ],
    targetLevel: [
        { required: true, message: '请选择适合层次', trigger: 'change' }
    ],
    hourlyRate: [
        { required: true, message: '请输入课时费', trigger: 'blur' }
    ],
    teachingMethod: [
        { required: true, message: '请选择授课方式', trigger: 'change' }
    ],
    location: [
        { required: true, message: '请输入授课地点', trigger: 'blur' }
    ],
    availableTime: [
        { required: true, message: '请输入可用时间', trigger: 'blur' }
    ]
}

// 提交表单
const submitForm = async () => {
    if (!formRef.value) return
    
    await formRef.value.validate(async (valid) => {
        if (valid) {
            try {
                const submitData = {
                    ...formData.value,
                    subjects: formData.value.subjects.join(',')
                }
                await tutoringService.publishTutoring(submitData)
                ElMessage.success('发布成功')
                resetForm()
            } catch (error) {
                ElMessage.error(error.response?.data?.message || '发布失败')
            }
        }
    })
}

// 重置表单
const resetForm = () => {
    if (formRef.value) {
        formRef.value.resetFields()
    }
}
</script>

<style scoped>
.tutoring-publish {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.unit {
    margin-left: 10px;
    color: #666;
}

.el-select {
    width: 100%;
}
</style> 